<script setup>
import { ref } from 'vue'

defineEmits(['openImage'])
const isMobile = window.matchMedia('(pointer:coarse)').matches
const slide = ref(0)
const autoplay = ref(true)
const fullscreen = ref(false)
const picList = [
  '/screenshot-1_1280_720.jpg',
  '/screenshot-2_1280_720.jpg',
  '/screenshot-3_1280_720.jpg',
  '/screenshot-4_1280_720.jpg',
  '/photo-1_1280_960.jpg',
  '/photo-2_1280_960.jpg'
]
</script>

<template>
  <div class="row justify-center bg-amber-1">
    <div class="col-lg-8 col-12 q-px-md q-mx-lg q-pt-xl column q-gutter-lg">
      <div style="font-size: 3em; font-family: SourceHanSerifCN-Heavy, serif; color:#1f5354">项目简介</div>
      <q-carousel
        v-model="slide"
        animated
        navigation
        infinite
        :autoplay="autoplay"
        swipeable
        control-color="black"
        transition-prev="slide-right"
        transition-next="slide-left"
        :height="isMobile ? '50vw' : '36vw'"
        :fullscreen="fullscreen"
        @mouseenter="autoplay = false"
        @mouseleave="autoplay = true"
      >
        <q-carousel-slide v-for="(pic, n) of picList" :key="n" :name="n" :img-src="pic" :style="fullscreen ? 'background-repeat: no-repeat; background-size: contain;' : ''" />
        <template #control>
          <q-carousel-control v-if="fullscreen" position="top-right" :offset="[18, 18]">
            <q-btn dense icon="close" color="white" text-color="black" @click="fullscreen = false">
              <q-tooltip content-class="size-14">退出图片全屏</q-tooltip>
            </q-btn>
          </q-carousel-control>
        </template>
      </q-carousel>
      <div class="col" :style="{ fontSize: isMobile ? '14px' : '17px' }">
        <p>“蜀都河图：成都自然历史文化数据库”是由成都城市河流研究会（以下简称河研会）与地图书人文地理知识库（以下简称地图书）于2020年10月共同发起的，由多家单位和多位知名学者联合参与的一项公益开放协作项目，旨在广泛搜集成都古旧地图、老照片等电子资料，在此基础上以地图为载体，通过地图书平台提供的开放协作服务，整理、标注和关联成都平原范围内重要的历史地名、园林建筑、河湖湿地、街巷古道、物种发现地、桥梁码头、宮观庙宇等自然人文地标以及重要历史遗迹和文保单位等信息，再运用数字化技术进行可视化呈现，如通过古今地图数字化对比与关联，通过3D建模复原自然历史风貌等手段，结合传统与现代的综合价值，将成都市重要自然人文信息通过现代科技手段直观呈现给公众。</p>
        <p>“蜀”指四川，“都”指成都，“河”代表着自然生态，“图”代表着历史人文。项目过程将体现“人文创新、绿色自然、公益科普、开放共享”的执行理念，为区域留存自然生境与历史记忆，数字化技术则被广泛应用到本项目所呈现的保育自然和记忆历史目标之中，激发公众全面认知与保护参与，“蜀都河图：成都自然历史文化数据库”将协助人们建立起对区域环境变迁和历史文化的直观认知和深度探索，为今天的城市的发展和保护奠定基础。除了为公众科普提供创新内容，为科研课题提供基础数据外，亦能为政府决策提供咨询建议，为市场企业提供背景参考，为社会组织提供行动思路。</p>
        <p>2021年10月30日，“蜀都河图”正式上线，并在第十五届岷江论坛发布了第一阶段成果和整体概念设计。项目预计需要5年时间初步完成，建设时间为2020年至2025年，完成后还将长期持续维护。</p>
        <p class="text-h6 text-teal">指导单位</p>
        <p><a href="https://www.scu.edu.cn/" target="_blank" class="text-primary">四川大学历史地理研究所</a></p>
        <p class="text-h6 text-teal">执行单位</p>
        <p><a href="http://www.rivers.org.cn/" target="_blank" class="text-primary">成都城市河流研究会</a></p>
        <p class="text-h6 text-teal">技术支持单位</p>
        <p><a href="https://www.ditushu.com/" target="_blank" class="text-primary">成都发现时代科技有限公司</a></p>
        <p class="text-h6 text-teal">专家团队</p>
        <p>李勇先：四川大学历史地理研究所所长</p>
        <p>袁庭栋：巴蜀文化学者，《成都街巷志》作者</p>
        <p>唐亚：四川大学环境学院教授、生态学家</p>
        <p>陈庆恒：中国科学院成都生物研究所资深研究员</p>
        <p>范晓：四川省地矿局高级工程师，地质学家</p>
        <p>华桦：人文地理作家，《成都河流故事》主编</p>
        <p class="text-h6 text-teal">执行团队</p>
        <p>孙吉：项目负责人，历史地理学硕士，成都城市河流研究会秘书长，负责项目统筹执行</p>
        <p>杨明茗：项目协调，成都城市河流研究会行政财务主管，负责项目财务行政</p>
        <p>曹江：技术总监，地图书网站创始人，负责项目数字化呈现，古旧地图搜集整理牵头人</p>
        <p>杨若虚：项目志愿者，《成都地名故事》、《成都慈善史》作者，老照片搜集整理小组牵头人</p>
        <p>陈萌：项目志愿者，电子科技大学成都学院教师，古旧地图标注小组牵头人</p>
        <p>相关志愿者团队：共同协作项目执行和呈现</p>
        <p class="text-h6 text-teal">其他志愿者名单（以第一阶段参与历史地名标注的数量和其它工作排序）</p>
        <p>1. 叶镇豪</p>
        <p>2. cyn</p>
        <p>3. zhangxianggis</p>
        <p>4. 西西弗的石头123</p>
        <p>5. 春天的芭蕾</p>
        <p>6. 刘平</p>
        <p>7. Mos</p>
        <p>8. 蕾</p>
        <p>9. 李行之</p>
        <p>10. 巴里切罗</p>
        <p class="text-h6 text-teal">贡献者名单（按参与时间排序）</p>
        <p>郭声波：暨南大学历史地理研究中心教授、博士生导师</p>
        <p>徐建平：复旦大学历史地理研究中心副研究员</p>
        <p>陈建红：山东大学在读博士研究生</p>
        <p class="text-h6 text-teal">项目大事记</p>
        <p>1. 2020年10月，项目开始构思和筹备。</p>
        <p>2. 2020年12月，第一次线上会议。</p>
        <p>3. 2021年3月，公开招募志愿者。</p>
        <p>4. 2021年4月，第一次线下会议。</p>
        <p>5. 2021年9月，第二次线下会议。</p>
        <p>6. 2021年10月，项目正式上线，发布第一阶段成果。</p>
        <p class="text-h6 text-teal">联系方式</p>
        <p>邮箱：14624757@qq.com</p>
        <p>电话：15982006922</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.isMobile p {
  margin-bottom: 12px;
}
</style>
